<template>
    <div style='height:100%;' ref='containerRef'>
        <div v-if='value && value.length > 0' ref='FireWarnTop5chartContainer' style='height:100%;width:100%;'></div>
        <XLoading v-if='!value || value.length == 0'></XLoading>
    </div>
</template>

<script lang='ts'>
    import { Chart } from '@antv/g2';
import { nextTick, onMounted, ref, toRef, watch, defineComponent } from 'vue';
import { FIREColors } from '../Colors';
interface Props {
		modelValue : any[];
        colors:FIREColors
	}
    let chart:Chart

    export default defineComponent({
        props : {
            modelValue : {
				type : [Array, Object],
				default : function() {
					return null
				}
			},

            colors: {
                type : Object,
                default() {
                    return {}
                }
            }
        },

        data() {
            return {

            }
        },

        setup(props:Props) {
            let containerRef = ref<{[key:string]:any}>({})
            let FireWarnTop5chartContainer = ref<{[key:string]:any}>({})

            const value = toRef(props, 'modelValue')
            watch(() => [...value.value], (nv) => {
                if(value.value != null && value.value.length > 0) {
                    nextTick(() => {
                        draw()
                    })
                }
            })

            function draw() {
                let data = JSON.parse(JSON.stringify(value.value || []))
                data.sort(function(a, b) {
                    return a.value - b.value
                })

                let container:HTMLElement = FireWarnTop5chartContainer.value as HTMLElement
                // if(!chart) {
                //     chart = new Chart({
                //         container: container,
                //         autoFit: true,
                //         padding: [0, 0]
                //     })
                    
                // }else {
                //     chart.clear()
                // }


                chart = new Chart({
                    container: container,
                    autoFit: true,
                    padding: [0, 0]
                })


                chart.tooltip({
                    title: 'name',
                    showMarkers: false
                })

                chart.theme({
                    maxColumnWidth: container.clientWidth * 0.058,
                    minColumnWidth: container.clientWidth * 0.058,
                })

                chart.legend(false)

                chart.coordinate('polar', { innerRadius: 0.1 }).transpose();

                chart.interaction('element-active');

                chart
                .interval({
                    background: { style: { fill: '#F0F0F0', fillOpacity: 0.1 }},
                })
                .position('name*value')
                .color('color', color => {
                    return color
                })
                .style({
                    lineCap: 'round',
                })
                .tooltip('value', (val) => {
                    return {
                        name: '数量',
                        value: val,
                    };
                })
                .label('value', {
                    offset: -2,
                    content: (data) => {
                        return data.percent * 100 + '%';
                    }
                })

                chart.interaction('element-active');

                chart.data(data);
                chart.render();
            }


            onMounted(() => {
                if(value.value != null && value.value.length > 0) {
                    nextTick(() => {
                        draw()
                    })
                }
            })

            return {
                containerRef,
                FireWarnTop5chartContainer,

                value,

                draw
            }
        }
    })
</script>